<template>
	<view class="content">
		<view class="main-banner">
			<swiper class="main-swiper" :autoplay="true" :interval="5000" :circular="true" @change="mainChange">
				<block v-for="(mainBannerItem, mainBannerKey) in mainBanner" :key="mainBannerKey">
					<swiper-item class="main-swiper-item">
						<image class="main-swiper-image" mode="aspectFill" :src="mainBannerItem.url">
						</image>
					</swiper-item>
				</block>
			</swiper>
			<view class="main-indicator-dots" v-if="mainBanner.length > 1">
				<view class="main-indicator-dots-item" v-for="(indicatorItem, indicatorKey) in mainBanner.length"
					:key="indicatorKey" :class="{'main-dot-active': mainBannerCurrent == indicatorKey}">
				</view>
			</view>
		</view>
		<view class="main_body">
			<view class="flex flex-wrap justify-between">
				<view class="main_body_Functional" v-for="(item,index) in functionalData" :key="index" @click="scanCode(index)">
					<view class="flex flex-direction">
						<view class="title1">
							{{item.title}}
						</view>
						<view class="title2">
							{{item.introduce}}
						</view>
					</view>
				</view>

			</view>

		</view>
		<PrivacyPop :showPrivacy="showPrivacy" @close="close" :privacyContractName="privacyContractName" />
	</view>
</template>

<script setup>
	import PrivacyPop from '@/components/PrivayPop.vue'
	import {
		onMounted,
		reactive,
		ref,
		getCurrentInstance
	} from "vue"
	let {
		proxy
	} = getCurrentInstance()
	let functionalData = reactive([{
		title: '扫码开台',
		introduce: '请扫描二维码开台'
	}, {
		title: '团购核销',
		introduce: '美团/抖音/大众点评'
	}, {
		title: '招募合伙人',
		introduce: '零成本享受城市红利'
	}, {
		title: '操作指引',
		introduce: '如何开台操作指引'
	}])
	let mainBannerCurrent = ref(0)
	const scanCode = (index) => {
		switch (index) {
			case 0: //扫码
				uni.scanCode({
					success(res) {
						// let code = res.
						proxy.$https('/decode_qrcode_api', {
							qrcode_str: res.result
						}).then(res => {
							console.log(res)
							uni.redirectTo({
								url: "/pagesStore/select_order/select_order?item=" + encodeURIComponent(JSON.stringify(
									res))
							})
						})
					}
				})
				console.log(0)
				break;
			case 1: //团购核销
				console.log(1)
				uni.navigateTo({
					url: "/pageHome/verification/index"
				})
				break;
			case 2: //招募合伙人
				console.log(2)
				break;
			case 3: //操作指引
				console.log(3)
				break;
			default:
				break;
		}

	}
	let mainBanner = reactive([{
		id: 0,
		type: 'image',
		url: '../../static/images/头部banner.png'
	}, {
		id: 0,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
	}, {
		id: 1,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
	}, {
		id: 2,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
	}, {
		id: 3,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
	}, {
		id: 4,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
	}, {
		id: 5,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
	}, {
		id: 6,
		type: 'image',
		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
	}])
	let privacyContractName = ref("")
	let showPrivacy = ref(false)
	let mainChange = (e) => {
		console.log(e)
		let {
			current
		} = e.detail
		mainBannerCurrent.value = current
	}
	const close = () => {
		showPrivacy.value = false
	}
	onMounted(() => {
		// uni.getPrivacySetting({ //判断隐私协议
		// 	success: res => {
		// 		if (res.needAuthorization) {
		// 			console.log(res, '判断隐私协议')
		// 			privacyContractName.value = res.privacyContractName
		// 			showPrivacy.value = true
		// 		} else {
		// 			console.log('已授权')
		// 		}
		// 	},
		// 	fail: (err) => {
		// 		console.log(err)
		// 	},
		// 	complete: (e) => {
		// 		console.log(e)
		// 	}
		// })
	})
</script>

<style lang="scss" scoped>
	.main-banner {
		position: relative;
		width: 750rpx;
		// padding-bottom: 78rpx;

		.main-swiper {
			width: 750rpx;
			height: 492rpx;

			.main-swiper-item {
				width: 750rpx;
				height: 492rpx;

				.main-swiper-image {
					width: 750rpx;
					height: 492rpx;
					background-color: #FBFBFB;
				}
			}
		}

		.main-indicator-dots {
			position: absolute;
			right: 32rpx;
			bottom: 80rpx;
			display: flex;

			.main-indicator-dots-item {
				width: 10rpx;
				height: 10rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
				background-color: rgba(255, 255, 255, .7);
				border-radius: 20rpx;

				&.main-dot-active {
					width: 30rpx;
					background-color: #FFFFFF;
					border-radius: 10rpx;
					;
				}
			}
		}
	}

	.main_body {
		width: 750rpx;
		background-color: #FFFFFF;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		transform: translateY(-40rpx);
		height: 2000rpx;
		padding: 52rpx 32rpx 0 32rpx;

		.main_body_Functional {
			width: 330rpx;
			height: 158rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			&:nth-child(1) {
				background: linear-gradient(112deg, #DFFFEF 0%, #FFFFFF 100%);
				background-image: url('@/static/images/ScanCode.png');
				background-repeat: no-repeat;
				background-position: right;
			}

			&:nth-child(2) {
				background: linear-gradient(90deg, #FFFFE8 42%, rgba(255, 255, 255, 0) 100%);
				background-image: url('@/static/images/团购核销.png');
				background-repeat: no-repeat;
				background-position: right;
			}

			&:nth-child(3) {
				background: linear-gradient(112deg, #DFEFFF 0%, #FFFFFF 100%);
				background-image: url('@/static/images/招募合伙人.png');
				background-repeat: no-repeat;
				background-position: right;
			}

			&:nth-child(4) {
				background: linear-gradient(90deg, #ECEFFF 0%, #FFFFFF 92%);
				background-image: url('@/static/images/操作指引.png');
				background-repeat: no-repeat;
				background-position: right;
			}
		}

		.title1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			margin: 36rpx 0 0 20rpx;
		}

		.title2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
			margin: 16rpx 0 0 20rpx;
		}
	}
</style>